<template>  
  <div class="flow-flowDemo-edit">
    <!-- 添加或修改流程审批测试对话框 -->
    <el-dialog v-model="isShowDialog" width="800px" :close-on-click-modal="false" :destroy-on-close="true">
      <template #header>
        <div v-drag="['.flow-flowDemo-edit .el-dialog', '.flow-flowDemo-edit .el-dialog__header']">{{(!formData.id || formData.id==0?'添加':'修改')+'流程审批测试'}}</div>
      </template>
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">        
        <el-form-item label="标题" prop="title">
          <el-input v-model="formData.title" placeholder="请输入标题" />
        </el-form-item>        
        <el-form-item label="年龄" prop="age">
          <el-input v-model="formData.age" placeholder="请输入年龄" />
        </el-form-item>       
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="onSubmit" :disabled="loading">确 定</el-button>
          <el-button @click="onCancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRefs, ref,unref,getCurrentInstance } from 'vue';
import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
import {
  listFlowDemo,
  getFlowDemo,
  delFlowDemo,
  addFlowDemo,
  updateFlowDemo,  
} from "/@/api/flow/flowDemo";
import {
  FlowDemoTableColumns,
  FlowDemoInfoData,
  FlowDemoTableDataState,
  FlowDemoEditState
} from "/@/views/flow/flowDemo/list/component/model"
defineOptions({ name: "ApiV1FlowFlowDemoEdit"})
const emit = defineEmits(['flowDemoList'])
  const props = defineProps({    
    statusOptions:{
      type:Array,
      default:()=>[]
    },    
  })
const {proxy} = <any>getCurrentInstance()
const formRef = ref<HTMLElement | null>(null);
const menuRef = ref();
const state = reactive<FlowDemoEditState>({
  loading:false,
  isShowDialog: false,
  formData: {    
    id: undefined,    
    title: undefined,    
    status: false ,    
    updatedAt: undefined,    
    createdBy: undefined,    
    age: undefined,    
  },
  // 表单校验
  rules: {    
    id : [
        { required: true, message: "主键不能为空", trigger: "blur" }
    ],    
    status : [
        { required: true, message: "审核状态不能为空", trigger: "blur" }
    ],    
  }
});
const { loading,isShowDialog,formData,rules } = toRefs(state);
// 打开弹窗
const openDialog = (row?: FlowDemoInfoData) => {
  resetForm();
  if(row) {
    getFlowDemo(row.id!).then((res:any)=>{
      const data = res.data;      
      state.formData = data;
  })
}
  state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.isShowDialog = false;
};
defineExpose({
  openDialog,
});
// 取消
const onCancel = () => {
  closeDialog();
};
// 提交
const onSubmit = () => {
  const formWrap = unref(formRef) as any;
  if (!formWrap) return;
  formWrap.validate((valid: boolean) => {
    if (valid) {
      state.loading = true;
      if(!state.formData.id || state.formData.id===0){
        //添加
      addFlowDemo(state.formData).then(()=>{
          ElMessage.success('添加成功');
          closeDialog(); // 关闭弹窗
          emit('flowDemoList')
        }).finally(()=>{
          state.loading = false;
        })
      }else{
        //修改
      updateFlowDemo(state.formData).then(()=>{
          ElMessage.success('修改成功');
          closeDialog(); // 关闭弹窗
          emit('flowDemoList')
        }).finally(()=>{
          state.loading = false;
        })
      }
    }
  });
};
const resetForm = ()=>{
  state.formData = {    
    id: undefined,    
    title: undefined,    
    status: false ,    
    updatedAt: undefined,    
    createdBy: undefined,    
    age: undefined,    
  }  
};
</script>
<style scoped>  
  .kv-label{margin-bottom: 15px;font-size: 14px;}
  .mini-btn i.el-icon{margin: unset;}
  .kv-row{margin-bottom: 12px;}
</style>